<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-img :src="require('../assets/logo.png')" class="my-3" contain height="200" />
      </v-col>

      <v-col class="mb-4">
        <h1 class="display-2 font-weight-bold mb-3">在线录音平台</h1>

        <p class="subheading font-weight-regular">
          根据给出文本在线录制音频数据，上传音频文件增添数据集
          <br />录制数据，点击
          <router-link :to="{name: 'Record'}">现在开始</router-link>
        </p>
      </v-col>

      <v-col class="mb-5" cols="12">
        <h2 class="headline font-weight-bold mb-3">相关说明</h2>

        <v-row justify="center">
          <router-link
            v-for="(next, i) in whatsNext"
            :key="i"
            :to="{name: next.href}"
            class="subheading mx-3"
          >{{ next.text }}</router-link>
        </v-row>
      </v-col>

      <v-col class="mb-5" cols="12">
        <h2 class="headline font-weight-bold mb-3">技术栈</h2>

        <v-row justify="center">
          <a
            v-for="(link, i) in importantLinks"
            :key="i"
            :href="link.href"
            class="subheading mx-3"
            target="_blank"
          >{{ link.text }}</a>
        </v-row>
      </v-col>

      <v-col class="mb-5" cols="12">
        <h2 class="headline font-weight-bold mb-3">额外功能</h2>

        <v-row justify="center">
          <span
            class="subheading mx-3 text-decoration-underline blue--text text--darken-2"
            @click="uploadDialog = true"
            style="cursor: pointer"
          >上传文本数据</span>
          <span
            class="subheading mx-3 text-decoration-underline blue--text text--darken-2"
            @click="exportDatum"
            style="cursor: pointer"
          >导出映射数据</span>
          <span
            class="subheading mx-3 text-decoration-underline blue--text text--darken-2"
            @click="feadBackDialog = true"
            style="cursor: pointer"
          >数据异常反馈</span>
        </v-row>
      </v-col>
      <UploadDialog :dialog="uploadDialog" @closeDialog="closeDialog"></UploadDialog>
      <FeedBack :dialog="feadBackDialog" @closeDialog="closeDialog"></FeedBack>
      <v-snackbar v-model="show" dark top timeout="3000" color="warning">
        <v-icon class="mr-2">mdi-alert</v-icon>
        暂不支持此项功能！
        <template v-slot:action="{ attrs }">
          <v-btn icon v-bind="attrs" @click="show = false">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </template>
      </v-snackbar>
    </v-row>
  </v-container>
</template>

<script>
import UploadDialog from "../components/UploadDialog";
import FeedBack from "../components/FeedBack";
export default {
  name: "HelloWorld",
  components: {
    UploadDialog,
    FeedBack,
  },

  data: () => ({
    importantLinks: [
      {
        text: "Axios",
        href: "https://github.com/axios/axios",
      },
      {
        text: "RecordRTC",
        href: "https://github.com/muaz-khan/RecordRTC",
      },
      {
        text: "Vuetify",
        href: "https://vuetifyjs.com/zh-Hans/",
      },
      {
        text: "Vue-Router",
        href: "https://router.vuejs.org/zh/",
      },
      {
        text: "Vuex",
        href: "https://vuex.vuejs.org/zh/",
      },
    ],
    whatsNext: [
      {
        text: "时间线",
        href: "TimeLine",
      },
      {
        text: "版本说明",
        href: "Version",
      },
      {
        text: "功能说明",
        href: "About",
      },
    ],
    uploadDialog: false,
    feadBackDialog: false,
    show: false
  }),
  methods: {
    closeDialog(index) {
      this.controlDialog(parseInt(index));
    },
    controlDialog(index) {
      if (index === 0) {
        this.uploadDialog = !this.uploadDialog;
      } else if (index === 2) {
        this.feadBackDialog = !this.feadBackDialog;
      }
    },
    exportDatum() {
      this.show = true
    },
  },
};
</script>
